<script setup>
import { ref } from 'vue';

const display = ref('0');
const firstOperand = ref(null);
const operator = ref(null);
const waitingForSecondOperand = ref(false);

const inputDigit = (digit) => {
  if (waitingForSecondOperand.value) {
    display.value = digit;
    waitingForSecondOperand.value = false;
  } else {
    display.value = display.value === '0' ? digit : display.value + digit;
  }
};

const inputDecimal = () => {
  if (waitingForSecondOperand.value) {
    display.value = '0.';
    waitingForSecondOperand.value = false;
    return;
  }

  if (!display.value.includes('.')) {
    display.value += '.';
  }
};

const handleOperator = (nextOperator) => {
  const inputValue = parseFloat(display.value);

  if (firstOperand.value === null) {
    firstOperand.value = inputValue;
  } else if (operator.value) {
    const result = calculate(firstOperand.value, inputValue, operator.value);
    display.value = String(result);
    firstOperand.value = result;
  }

  waitingForSecondOperand.value = true;
  operator.value = nextOperator;
};

const calculate = (firstOperand, secondOperand, operator) => {
  switch (operator) {
    case '+':
      return firstOperand + secondOperand;
    case '-':
      return firstOperand - secondOperand;
    case '*':
      return firstOperand * secondOperand;
    case '/':
      return firstOperand / secondOperand;
    default:
      return secondOperand;
  }
};

const resetCalculator = () => {
  display.value = '0';
  firstOperand.value = null;
  operator.value = null;
  waitingForSecondOperand.value = false;
};
</script>

<template>
  <div class="calculator">
    <div class="display">{{ display }}</div>
    <div class="buttons">
      <button class="btn operator" @click="resetCalculator">AC</button>
      <button class="btn operator">+/-</button>
      <button class="btn operator">%</button>
      <button class="btn operator" @click="handleOperator('/')">÷</button>

      <button class="btn" @click="inputDigit('7')">7</button>
      <button class="btn" @click="inputDigit('8')">8</button>
      <button class="btn" @click="inputDigit('9')">9</button>
      <button class="btn operator" @click="handleOperator('*')">×</button>

      <button class="btn" @click="inputDigit('4')">4</button>
      <button class="btn" @click="inputDigit('5')">5</button>
      <button class="btn" @click="inputDigit('6')">6</button>
      <button class="btn operator" @click="handleOperator('-')">-</button>

      <button class="btn" @click="inputDigit('1')">1</button>
      <button class="btn" @click="inputDigit('2')">2</button>
      <button class="btn" @click="inputDigit('3')">3</button>
      <button class="btn operator" @click="handleOperator('+')">+</button>

      <button class="btn zero" @click="inputDigit('0')">0</button>
      <button class="btn" @click="inputDecimal">.</button>
      <button class="btn operator equals">=</button>
    </div>
  </div>
</template>

<style scoped>
.calculator {
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  background-color: #f5f5f5;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.display {
  font-size: 2em;
  text-align: right;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #ddd;
  height: 40px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.btn {
  padding: 15px;
  font-size: 1.2em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #e0e0e0;
  transition: background-color 0.2s;
}

.btn:hover {
  background-color: #d0d0d0;
}

.operator {
  background-color: #f5923e;
  color: white;
}

.operator:hover {
  background-color: #e07b2e;
}

.equals {
  background-color: #f5923e;
  color: white;
}

.zero {
  grid-column: span 2;
}
</style>
